<template>
<div class="block" style="margin-top:10px;">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 8, 15, 30]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
</template>

<script>
export default {
    methods: {
        handleSizeChange(val) {
            this.size = val;
            this.$emit('sizechange', {
                currentPage: this.currentPage,
                size: this.size
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.$emit('pagechange', {
                currentPage: this.currentPage,
                size: this.size
            });
        }
    },
    data() {
        return {
            currentPage: 1,
            size: 5,
            total: 0
        };
    }
}
</script>
